<template>
	<view class="m-input-view">
		<input
			:focus="focus_"
			:type="inputType"
			:value="modelValue"
			@input="onInput"
			class="m-input-input"
			:placeholder="placeholder"
			:password="type === 'password' && !showPassword"
			@focus="onFocus"
			@blur="onBlur"
		/>
		<!-- 优先显示密码可见按钮 -->
		<view v-if="clearable_ && !displayable_ && modelValue.length" class="m-input-icon"><m-icon color="#cccccc" type="clear" size="20" @click="clear"></m-icon></view>
		<view v-if="displayable_" class="m-input-icon"><m-icon :color="showPassword ? '#666666' : '#cccccc'" type="eye" size="20" @click="display"></m-icon></view>
	</view>
</template>

<script>
import mIcon from '../uni-icons/uni-icons.vue';

export default {
	components: {
		mIcon
	},
	emits: ['update:modelValue'], //vue3自定义事件 https://v3.cn.vuejs.org/guide/component-custom-events.html#定义自定义事件
	props: {
		/**
		 * 输入类型
		 */
		type: String,
		/**
		 * 值
		 */
		modelValue: {
			type: String,
			default: ''
		},
		/**
		 * 占位符
		 */
		placeholder: String,
		/**
		 * 是否显示清除按钮
		 */
		clearable: {
			type: [Boolean, String],
			default: false
		},
		/**
		 * 是否显示密码可见按钮
		 */
		displayable: {
			type: [Boolean, String],
			default: false
		},
		/**
		 * 自动获取焦点
		 */
		focus: {
			type: [Boolean, String],
			default: false
		}
	},
	data() {
		return {
			/**
			 * 显示密码明文
			 */
			showPassword: false,
			/**
			 * 是否获取焦点
			 */
			isFocus: false
		};
	},
	computed: {
		inputType() {
			const type = this.type;
			return type === 'password' ? 'text' : type;
		},
		clearable_() {
			return String(this.clearable) !== 'false';
		},
		displayable_() {
			return String(this.displayable) !== 'false';
		},
		focus_() {
			return String(this.focus) !== 'false';
		}
	},
	methods: {
		clear() {
			this.$emit('update:modelValue', '');
		},
		display() {
			this.showPassword = !this.showPassword;
		},
		onFocus() {
			this.isFocus = true;
		},
		onBlur() {
			this.$nextTick(() => {
				this.isFocus = false;
			});
		},
		onInput(e) {
			this.$emit('update:modelValue', e.detail.value);
		}
	}
};
</script>

<style>
.m-input-view {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	flex: 1;
	padding: 0 10rpx;
}

.m-input-input {
	flex: 1;
	width: 100%;
}

.m-input-icon {
	width: 20px;
}
</style>
